<template>
    <a-modal  class="goods-select-modal" :width="540" :visible="true" cancel-text="取消[Esc]" ok-text="确认[Enter]" @ok="handleOk" @cancel="handleCancel">
        <a-form ref="formRef" :model="state.formData" >
            <a-form-item label="结算金额">
               <div style="display: flex;align-items: center;margin-top: -5px;">
                    合计 <span class="count-total"> {{props.total}}</span> 元
               </div>
            </a-form-item>
            <a-form-item label="开单员工" name="staffCode" :rules="[{required:true,message:'必填'}]">
                <a-select v-model:value="state.formData.staffCode">
                  <a-select-option v-for="(item,index) in storeStaffList" :key="index" :value="item.userId">{{ item.nickName }}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="店长或顾问授权" name="managerCode"  :rules="[{required:true,message:'必填'}]">
                <div style="display: flex;gap: 8px;">
                    <a-select v-model:value="state.formData.managerCode">
                        <a-select-option v-for="(item,index) in storeManageList" :key="index" :value="item.userId">{{ item.nickName }}</a-select-option>
                    </a-select>
                    <a-button @click="sendVcode" type="primary">发送验证码</a-button>
                </div>
            </a-form-item>
            <a-form-item label="验证码" name="code"  :rules="[{required:true,message:'必填'}]">
               <a-input v-model:value="state.formData.code" placeholder="请输入验证码"></a-input>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts" setup>
import { MessageService } from "@/service/MessageService";
import { message } from "ant-design-vue";
import { reactive,onMounted,onBeforeUnmount,nextTick,ref,computed } from "vue";

const props = defineProps<{
    total:number,
    staffList:any[]
}>()

const state = reactive<{
    current:number;
    formData: {
        staffCode:string;
        managerCode: string;
        code: string
    }
}>({

    current:0,
    formData: {
        staffCode:"",
        managerCode: "",
        code: ""
    }
})

const formRef = ref();

const emit = defineEmits<{
    (e:"ok",value:any):void,
    (e:"cancel"):void
}>()

onMounted(async()=>{
    window.addEventListener("keydown",handleKeydown)
})

onBeforeUnmount(()=>{
    window.removeEventListener("keydown",handleKeydown)
})

const sendVcode = async()=>{
    let curUser = storeManageList.value.find((staff)=>{
        return staff.userId === state.formData.managerCode;
    })
    if(!curUser)return message.success("请选择店长或顾问")
   let res = await MessageService.getVcode({mobile:curUser.phone});
}

const storeManageList = computed(()=>{
    return props.staffList.filter(staff=>staff.roleValue=="consultant" || staff.roleValue=="storeManager")
})

const storeStaffList = computed(()=>{
    return props.staffList.filter(staff=>staff.roleValue!="consultant" && staff.roleValue!="storeManager")
})

const handleKeydown = (e:any)=>{
    const code = e.code;
    if(["ArrowDown","ArrowUp","Enter","Esc"].includes(code)){
        e.preventDefault();
    }
   if(code === "Enter" || code==="NumpadEnter"){
        handleOk()
        return
    }else if(code === "Esc"){
        handleCancel()
        return
    }
}

const handleOk = ()=>{
    formRef.value.validateFields().then(async(valid:boolean)=>{
        if(valid){
          emit("ok",state.formData)
        }
    })
    
}

const handleCancel = ()=>{
    emit("cancel");
}
</script>

<style lang="less" scoped>

.goods-select-modal .ant-table-row.active-row{
    .ant-table-cell{
        border-top: 2px solid #7546c9;
        border-bottom: 2px solid #7546c9;
        background-color:lighten(#7546c9,40)
    }    
}

.count-total{
    font-size:24px;
    font-weight: border;
    display: block;
}

</style>@/service/MessageService